<script lang="ts" setup>
import { formatNumber } from '@/home/utils/format';
import Tag from '@/home/components/Tag.vue';
import { getShortDate } from '@/home/utils/date';

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});

const atomgitUrl = import.meta.env.VITE_ATOMGIT_URL;
</script>

<template>
  <div class="page-home-recommend-article rounded-4 bg-hex-fff p-20 shadow-[0_1px_6px_0_rgba(0,0,0,0.04)] hover:(shadow-[0_1px_10px_0_rgba(0,0,0,0.1)])">
    <div class="flex-y-center flex-wrap gap-x-4 text-12 text-[#adadad] leading-20">
      <template v-if="props.data.authorInfo">
        <a :href="`${atomgitUrl}/${props.data.authorInfo.username}`" target="_blank" class="flex-y-center gap-x-4" @click.stop>
          <img
            :data-src="props.data.authorInfo.photo"
            :alt="props.data.authorInfo.nickname"
            class="lozad block size-20 border border-#e8e8e8 rounded-50% border-solid"
            v-if="props.data.authorInfo.photo"
          >
          <div class="text-#292929">{{ props.data.authorInfo.nickname }}</div>
        </a>
        <div>·</div>
      </template>
      <div>{{ getShortDate(props.data.publishTime) }}</div>
    </div>

    <RouterLink :to="`/explore/journalism/detail/${props.data.informationId}`" class="group mt-8 block" target="_blank">
      <div class="flex justify-between gap-x-20">
        <div class="flex-grow">
          <div class="flex gap-x-8">
            <div class="h-22 flex-shrink-0 rounded-2 bg-hex-E8F4FF px-6 text-center text-12 color-hex-345DE2 font-400 leading-22" v-if="props.data.isSelected == 1">
              {{ $t('home.common.prime') }}
            </div>
            <h3 class="line-clamp-1 flex-grow break-anywhere text-16 color-hex-292929 font-500 leading-22 group-hover:(text-#345de2)" :title="props.data.informationTitle">{{ props.data.informationTitle }}</h3>
          </div>

          <p class="line-clamp-3 mt-6 break-anywhere text-justify text-14px color-hex-575757 font-400 leading-22" :title="props.data.informationMsg">
            {{ props.data.informationMsg }}
          </p>
        </div>

        <div class="h-94 w-160 flex-shrink-0">
          <img :data-src="props.data.informationUrl" :alt="props.data.informationTitle" class="lozad size-full rounded-4 bg-hex-f7f7f7 object-contain">
        </div>
      </div>
    </RouterLink>

    <div class="mt-10 flex-y-center justify-between gap-x-20">
      <div class="flex-shrink-0 self-end text-12 color-hex-8b8b8b font-400 leading-22">
        {{ $t('home.explore.journalism.read', { view: formatNumber(props.data.informationViews) }) }}
      </div>

      <div class="flex flex-wrap justify-end gap-x-10 gap-y-6">
        <Tag
          v-for="item in props.data.labelNameList"
          :key="item.labelId"
          :id="item.labelId"
          :name="item.labelName"
          class="block rounded-full bg-hex-f7f7f7 px-12 py-3 text-center text-12 color-hex-8b8b8b font-400 leading-16 hover:bg-hex-e8e8e8"
          blank
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>
